範例:
modal彈跳視窗
沒有Teleport前:
因為觸發Model的按鈕通常會在內層，但是彈跳的視窗應該是要對應整個外層置中。
Teleport用途:
可以指定元件內某些區塊的傳送位置。
<body>
<div>
<modal-button></modal-button>
</div>
<body>
app.component('modal-button',{
template:`
<button @click="modal-open = true">
open full screen modal!
</button>
//下面是modal內容
//運用teleport指定位置
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
modal content
<button @click="modalOpen = false"> Close </button>
</div>
</div>
<teleport>
`,
data(){
return{
modalOpen: false
}
}
})
